site_8g/src/app/[locale]/(TabBar)/deposit/Reward.tsx

import { ShopProductItem } from "@/api/depositsApi";
import clsx from "clsx";
import React from "react";
import styles from "./reward.module.scss";

interface Props {
    data: ShopProductItem;
}

const mapKey: any = {
    1: "Saldo",
    2: "Bonus",
    3: "Free",
    4: "Replay",
};

const Reward: React.FC<Props> = ({ data }) => {
    const getSuffix = (type: 1 | 2) => {
        const typeMap: any = {
            1: "BRL",
            2: "%",
        };
        return typeMap[type];
    };
    const renderData = React.useMemo(() => {
        if (!!(!data?.activity_reward || !data?.activity_reward)) return [];
        const result: any = {};

        if (data?.activity_reward?.length > 0) {
            data?.activity_reward?.forEach((item) => {
                if (item?.item_id <= 0 || item?.item_id > 4) return;
                result[item?.item_id] = {
                    amount: `${item?.amount}`,
                    reward: item?.reward,
                };
            });
        }
        if (data?.pay_reward?.length > 0) {
            data?.pay_reward?.forEach((item) => {
                if (item?.item_id <= 0 || item?.item_id > 4) return;
                const hasData = result[item?.item_id];
                let amount = "";
                if (hasData) {
                    if (hasData.reward === item.reward) {
                        amount = `${Number(hasData.amount) + Number(item?.amount)}`;
                    } else {
                        amount = `${hasData?.amount}${getSuffix(hasData.reward)}+${item?.amount}${getSuffix(item.reward)}`;
                    }
                } else {
                    amount = `${item?.amount}`;
                }
                result[item?.item_id] = {
                    amount: `${amount}${typeof amount === "string" ? "" : getSuffix(item.reward)}`,
                };
            });
        }
        // return result;
        return {
            ...result,
        };
    }, [data]);
    // D 1现金2彩金3免费币4重玩币
    if (Object.keys(renderData).length === 0) return <div className="h-[50px] w-[1px]"></div>;

    return (
        <div className={clsx(styles.rewardBox, "text-[.1rem] text-[#ccc]")}>
            {Object.keys(renderData).map((key) => {
                if (renderData[key] === 0) return null;
                return (
                    <div key={key} className={styles.rewardItem}>
                        <i className={clsx(styles[mapKey[key]])}></i>
                        <div className="relative -top-[5px] text-[#fff]">
                            <div>{mapKey[key]}</div>
                            <div>{renderData[key].amount}</div>
                        </div>
                    </div>
                );
            })}
        </div>
    );
};

export default Reward;